<template>
  <div class="c-bg-sgray">
    <div v-if="refundList.length > 0">
      <div class="c-bg-white c-flex-column c-ph24 c-br20" :class="index == 0 ? 'c-mt10' : 'c-mt12'" v-for="(item,index) in refundList" :key="index">
        <div class="c-bd-b1 c-flex-row c-justify-sb c-pv24">
          <div class="c-lh c-fc-gray c-fs20 c-flex-row c-aligni-center" v-if="item.applyAt">
            {{item.applyAt}}
          </div>
          <div class="c-lh c-fs22" :class="[1, 4].includes(item.afterStatus) ? 'theme-fc' : ''">{{item.type == 1 ? '退款' : '退货退款'}}{{item.afterStatus == 2 ? '成功' : ([-1, -2, -3].includes(item.afterStatus) ? '关闭' : '中')}}</div>
        </div>
        <div class="c-flex-row c-pt20" @click="clickGoShop(item.mgId)">
          <div class="c-ww180 c-hh180 c-text-hidden c-br10">
            <img :src="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" class="c-w100 c-h c-br10 imgCloseBig c-object-fit-cover" />
          </div>
          <div class="c-flex-column c-flex-grow1 c-w0 c-pl20 c-justify-sb">
            <div class="c-fs24 c-text-ellipsis1 c-lh34 c-mb10">{{item.name}}</div>
            <collapse :default-height="52">
              <div class="c-fs20 c-fc-gray" v-if="item.subSpecs">规格：{{item.subSpecs}}</div>
            </collapse>
            <div class="c-fs20 c-fc-xblack c-mt10">退款：{{'￥' | iosPriceFilter}}{{item.refundMoney}}</div>
          </div>
        </div>
        <div class="c-bg-sgray c-pv16 c-ph24 c-fs24 c-w100 c-br8 c-mt20 c-mt10" v-if="[1,2,-2,4,5].includes(item.refundStatus)">
          <template v-if="item.refundStatus==1">
            等待商家处理{{item.type == 1 ? '退款' : '退货退款'}}申请，还剩<span class="theme-fc"><cj-clocker :time="item.automaticTime * 1000" format="%D天%H小时%M分"></cj-clocker></span>
          </template>
          <template v-else-if="item.refundStatus==2">
            退款成功，退款金额：<span class="theme-fc">{{'￥' | iosPriceFilter}}{{item.refundMoney}}</span>
          </template>
          <template v-else-if="item.refundStatus==-2">
            商家拒绝{{item.type == 1 ? '退款' : '退货退款'}}申请，请在<span class="theme-fc"><cj-clocker :time="item.automaticTime * 1000" format="%D天%H小时%M分"></cj-clocker></span>内处理
          </template>
          <template v-else-if="item.refundStatus==4">
            等待买家寄出商品，剩余时间<span class="theme-fc"><cj-clocker :time="item.automaticTime * 1000" format="%D天%H小时%M分"></cj-clocker></span>
          </template>
          <template v-else-if="item.refundStatus==5">
            等待商家同意退款，还剩<span class="theme-fc"><cj-clocker :time="item.automaticTime * 1000" format="%D天%H小时%M分"></cj-clocker></span>
          </template>
        </div>
        <div class="c-lh c-fs24 c-flex-row c-justify-end c-aligni-center c-pv24">
          <div class="c-bd1 c-br24 c-fs24 c-pv12 c-ph24 c-ml20" @click="goOrderSales(item.godId, item.gorId)">查看详情</div>
        </div>
      </div>
    </div>
    <loading-status-tem :dataStatus="dataStatus" noDataText="暂无订单"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import collapse from "@/components/templates/common/collapse.vue";
import { utilJs } from "@/utils/common.js";
let pageIndex = 1;
const LIMIT = 10;
export default {
  name: "MyRefundList",
  components: {
    loadingStatusTem,
    collapse
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      dataStatus: 'HAS_MORE_DATA',
      refundList: [], // 退款售后列表
      goId: ''
    };
  },
  created() {
    utilJs.appShare(this);
  },
  watch: {
    $route(to, from) {
      if (to.path == '/member/myRefund/myRefundList' && from.path == '/mall/mallOrder/orderAfterSales' && (!to.query.goId) && from.query.gorId && this.refundList && this.refundList.length > 0) {
        let gorId = from.query.gorId;
        this.getRefundList(gorId);
      }
      if ((to.path == '/member/myRefund/myRefundList' && from.path == '/member/memberIndex') || (to.path == '/member/myRefund/myRefundList' && from.path == '/mall/mallOrder/orderDetail' && to.query.goId)) {
        this.initData();
      }
    }
  },
  mounted() { },
  methods: {
    // 跳转到订单售后
    goOrderSales(godId, gorId) {
      this.$routerGo(this, "push", {
        path: "/mall/mallOrder/orderAfterSales",
        query: ({
          godId: godId,
          gorId: gorId
        })
      });
    },
    // 获取退款售后列表
    getRefundList(gorId, goId) {
      let page = pageIndex;
      if (!gorId || gorId == '') {
        if (this.dataStatus == 'LOADING') {
          return;
        }
        this.dataStatus = 'LOADING';
      } else {
        let index = this.refundList.findIndex(item => item.gorId == gorId);
        if (index >= 0) {
          page = parseInt((index / 10)) + 1;
        }
      }
      this.$loading.show();
      utilJs.getMethod(global.apiurl + "mall/getRefundList?page=" + page + "&limit=" + LIMIT + (goId ? ("&goId=" + goId) : ''),
        res => {
          if (gorId) {
            let gorIndex = this.refundList.length % 10;
            this.$set(this.refundList, gorIndex, res.data[gorIndex]);
            this.$loading.hide();
          } else {
            if (pageIndex == 1) {
              this.refundList = res.data ? res.data : [];
            } else {
              this.refundList = [...this.refundList, ...res.data];
            }
            this.$loading.hide();
            if (res.data && (res.data.length < LIMIT)) {
              this.dataStatus = (res.data && res.data.length == 0 && pageIndex == 1) ? 'NO_DATA' : 'NO_MORE_DATA';
            } else {
              this.dataStatus = 'HAS_MORE_DATA';
              pageIndex++;
            }
          }
        }, failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    clickGoShop(shopNo) {
      this.$routerGo(this, "push", {
        path: "/mall/shopDetail/shopDetail",
        query: { shopNo: shopNo }
      });
    },
    initData() {
      pageIndex = 1;
      this.refundList = [];
      this.dataStatus = 'HAS_MORE_DATA';
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    },
    windowScrollFunction: function () {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.refundList.length > 0) {
          this.getRefundList();
        }
      });
    },
  },
  activated() {
    setDocumentTitle("退款/售后");// eslint-disable-line
    this.wechatShare();
    this.goId = this.$route.query.goId || '';
    if (utilJs.checkNeedInitData(this.refundList)) {
      this.initData();
      this.getRefundList('', this.goId);
    }
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
